var that
class Tab {
    // constructor  构造器
    constructor(id) {
        that = this;
        // 获取元素
        this.tab = document.querySelector(id);
        // 获取加号
        this.add = this.tab.querySelector(".tabadd");
        this.ul = this.tab.querySelector("ul");
        this.tabscon = document.querySelector(".tabscon");
        this.onEvent()

    }
    // 绑定事件
    onEvent() {
        that.updateNode()
        this.add.onclick = this.addTab;
        for (var i = 0; i < this.lis.length; i++) {
            // 因为获取到的li元素为对象，所以给对象添加index属性，用来记录索引号
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
            this.remove[i].onclick = this.removeTab;
            this.spans[i].ondblclick = this.editTab;
        }
    }
    // 因为我们动态添加元素 需要从新获取对应的元素
    updateNode() {
        this.lis = document.querySelectorAll(".fisrstnav li");
        this.sections = document.querySelectorAll(".tabscon section");
        this.remove = document.querySelectorAll(".iconfont");
        this.spans = document.querySelectorAll('.fisrstnav li span:first-child');
    }
    // 1.切换功能
    toggleTab() {
        that.removeClass();
        this.className = "liactive";
        that.sections[this.index].className = "conactive"
    }
    // 去除类
    removeClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = "";
            that.sections[i].className = "";
        }
    }
    // 2.添加功能
    addTab() {
        that.removeClass()
        var li = `<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>`;
        var section = `<section class="conactive">新添加的</section>`;
        that.ul.insertAdjacentHTML('beforeend', li);
        that.tabscon.insertAdjacentHTML('beforeend', section);
        // 重新获取li和section并添加绑定事件
        that.onEvent();
    }
    // // 3.删除功能
    // removeTab(e) {
    //     e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
    //     var index = this.parentNode.index;
    //     that.lis[index].remove();
    //     that.sections[index].remove();
    //     that.onEvent()
    //     // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变,直接退出函数
    //     if (document.querySelector('.liactive')) return;
    //     console.log(index);
    //     // that.lis[index] && (index == 0 ? that.lis[index].click() : that.lis[index - 1].click());
    //     if (index == 0) {
    //         // that.lis[index] ? that.lis[index].click() : console.log('sb');
    //         that.lis[index] && that.lis[index].click()
    //     } else {
    //         that.lis[index - 1].click();
    //     }
    //     // console.log(index);
    // }
    // 4.修改功能
    editTab() {
        // 双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        var str = this.innerHTML;
        this.innerHTML = "<input type='text' value=" + this.innerHTML + ">";
        var ipt = this.querySelector("input");
        ipt.select();
        ipt.addEventListener("blur", function () {
            // if (this.value.trim()) {
            //     // 将input的值给span
            //     this.parentNode.innerText = this.value;
            //     return
            // }
            // this.parentNode.innerText = str
            this.parentNode.innerText = this.value.trim() ? this.value : str;
        })
        ipt.addEventListener("keyup", function (e) {
            if (e.keyCode == 13) {
                this.blur()
            }
        })
    }
}
// 实例化类
var tab = new Tab('#tab')





